<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      title="详情页模板头部"
      :indent="20"
      :columns="columns"
      :search-columns="searchColumns"
      :request-api="getTableList"
      row-key="id"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary"
          v-auth="'detail.mode.head.create'"
          :icon="CirclePlus"
          @click="openAddEdit('新增详情页模板头部')"
        >
          新增
        </el-button>
        <el-button
          v-auth="'detail.mode.head.remove'"
          type="danger"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
        <el-button
          v-auth="'detail.mode.head.import'"
          type="primary"
          :icon="Upload"
          plain
          @click="importData"
        >
          导入
        </el-button>
        <el-button
          v-auth="'detail.mode.head.export'"
          type="primary"
          :icon="Download"
          plain
          @click="downloadFile"
        >
          导出
        </el-button>
      </template>
      <template #operation="{ row }">
<!--        <el-button-->
<!--          v-auth="'detail.mode.head.update'"-->
<!--          type="primary"-->
<!--          link-->
<!--          :icon="EditPen"-->
<!--          @click="openAddEdit('编辑详情页模板头部', row, false)"-->
<!--        >-->
<!--          编辑-->
<!--        </el-button>-->
        <el-button
          type="primary"
          v-auth="'detail.mode.head.update'"
          link
          :icon="EditPen"
          @click="gotoEditPage(row)"
        >
          编辑模式
        </el-button>
        <el-button
            v-auth="'detail.mode.head.remove'"
            type="primary"
            link
            :icon="Delete"
            @click="deleteInfo(row)"
        >
          删除
        </el-button>
      </template>
    </ProTable>
    <DetailModeHeadForm ref="detailModeHeadRef" />
    <ImportExcel ref="ImportExcelRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  CirclePlus,
  Delete,
  EditPen,
  Upload,
  Download,
} from '@element-plus/icons-vue'
import ProTable from '@/components/ProTable/index.vue'
import {
  createDetailModeHeadApi,
  removeDetailModeHeadApi,
  updateDetailModeHeadApi,
  getDetailModeHeadListApi,
  getDetailModeHeadDetailApi,
  importDetailModeHeadExcelApi,
  exportDetailModeHeadExcelApi,
} from '@/api/modules/detailModel/detailModeHead';
import { useHandleData } from '@/hooks/useHandleData';
import DetailModeHeadForm from '@/views/club/book/charactor/components/DetailModeHeadForm.vue';
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface';
import type { DetailModeHeadQuery, DetailModeHeadRow } from '@/api/types/detailmodel/detailModeHead';
import ImportExcel from '@/components/ImportExcel/index.vue';
import { downloadTemplate } from '@/api/modules/system/common';
import { useDownload } from "@/hooks/useDownload";
import router from "@/router";
defineOptions({
  name: 'DetailModeHeadView'
})
const proTableRef = ref<ProTableInstance>();
// 表格配置项
const columns: ColumnProps<DetailModeHeadRow>[] = [
  { type: 'selection', width: 80 },
  { prop: 'title', label: '标题' },
  { prop: 'titleUnder', label: '标题注释' },
  { prop: 'status', label: '状态:0草稿,1已保存' },
  { prop: 'context', label: '简介' },
  { prop: 'musicFile', label: '主体音乐文件ID' },
  { prop: 'ext1', label: '封面地址' },
  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]
// 搜索条件项
const searchColumns: SearchProps[] = [
  { prop: 'title', label: '标题', el: 'input' },
  { prop: 'titleUnder', label: '标题注释', el: 'input' },
  { prop: 'status', label: '状态:0草稿,1已保存', el: 'select' },
  { prop: 'context', label: '简介', el: 'input' },
  { prop: 'musicFile', label: '主体音乐文件ID', el: 'input' },
  { prop: 'ext1', label: '封面地址', el: 'input' }
]
// 获取table列表
const getTableList = (params: DetailModeHeadQuery) => {
  let newParams = formatParams(params);
  return getDetailModeHeadListApi(newParams);
};
const formatParams = (params: DetailModeHeadQuery) =>{
  let newParams = JSON.parse(JSON.stringify(params));
  return newParams;
}
// 打开 drawer(新增、查看、编辑)
const detailModeHeadRef = ref<InstanceType<typeof DetailModeHeadForm>>()
const openAddEdit = async(title: string, row: any = {}, isAdd = true) => {
  if (!isAdd) {
    const record = await getDetailModeHeadDetailApi({ id: row?.id })
    row = record?.data
  }
  const params = {
    title,
    row: { ...row },
    api: isAdd ? createDetailModeHeadApi : updateDetailModeHeadApi,
    getTableList: proTableRef.value?.getTableList
  }
  detailModeHeadRef.value?.acceptParams(params)
}
// 删除信息
const deleteInfo = async (params: DetailModeHeadRow) => {
  await useHandleData(
    removeDetailModeHeadApi,
    { ids: [params.id] },
    `删除【${params.id}】详情页模板头部`
  )
  proTableRef.value?.getTableList()
}

let gotoEditPage = (item : any) => {
   router.push({path:'/novel/character',query:{id:item.id ,title:'人物'}})

}


// 批量删除信息
const batchDelete = async (ids: (string | number)[]) => {
  await useHandleData(removeDetailModeHeadApi, { ids }, '删除所选详情页模板头部')
  proTableRef.value?.clearSelection()
  proTableRef.value?.getTableList()
}
// 导入
const ImportExcelRef = ref<InstanceType<typeof ImportExcel>>()
const importData = () => {
  const params = {
    title: '详情页模板头部',
    templateName: '详情页模板头部',
    tempApi: downloadTemplate,
    importApi: importDetailModeHeadExcelApi,
    getTableList: proTableRef.value?.getTableList
  }
  ImportExcelRef.value?.acceptParams(params)
}
// 导出
const downloadFile = async () => {
  let newParams = formatParams(proTableRef.value?.searchParam as DetailModeHeadQuery);
  useDownload(exportDetailModeHeadExcelApi, "详情页模板头部", newParams);
};
</script>